import React from 'react'
import {Col, Row} from "antd";

import {WeaLocaleProvider,WeaInputNumber,WeaColorPicker,WeaCheckbox,WeaSelect} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

export default class SettingStyleExtend extends React.Component{

    render (){
        const {setting,setSetting} = this.props
        const {modle,showType,showMenuItem,fontSize,menuItemTBSpacing,menuItemLRSpacing,menuItemTBMargin,menuItemLRMargin,radius,menuItemAutoWidth,menuItemWidth,autoOpenMenuItemWhenCheckSubMenu,backGroundColorGlobal,isBackGroundTransparent,backGroundColorMenuItem,fontColor,fontWeight,backGroundColorFirstMenuItemSelected,fontColorFirstMenuItemSelected,fontWeightFirstMenuItemSelected,backGroundColorOtherMenuItemSelected,fontColorOtherMenuItemSelected,fontWeightOtherMenuItemSelected} = setting

        const modles = [{
            key: "0",
            selected: true,
            showname: "水平",
        },{
            key: "1",
            selected: false,
            showname: "内联",
        },{
            key: "2",
            selected: false,
            showname: "垂直向左",
        },{
            key: "3",
            selected: false,
            showname: "垂直向右",
        }]
        const showTypeOptions = [{
            key: "0",
            selected: true,
            showname: "左右箭头",
        },{
            key: "1",
            selected: false,
            showname: "三点",
        }]
        const showMenuItemOptions = [{
            key: "0",
            selected: true,
            showname: "悬浮",
        },{
            key: "1",
            selected: false,
            showname: "点击",
        }]
        return (
            <div>
                <div className="set-item" >
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@3hq5i2`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@45d3sg`} span={6} >
                            <div>模式 :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qrt9ah`} span={18}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@p1pwv0`}
                                options={modles}
                                value={modle}
                                onChange={(v, showname) => {
                                    setSetting({modle: v})
                                }}
                            />
                        </Col>
                    </Row>
                </div>
                {
                    modle == '0' ? (
                        <div className="set-item" >
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@h74kpx`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3ampjo`} span={6} >
                                    <div>菜单超出显示方式 :</div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jvli7y`} span={18}>
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@7n2xuf`}
                                        options={showTypeOptions}
                                        value={showType}
                                        onChange={(v, showname) => {
                                            setSetting({showType: v})
                                        }}
                                    />
                                </Col>
                            </Row>
                        </div>
                    ) : null
                }
                {
                    modle != '1' ? (
                        <div className="set-item" >
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@wn9qz8`}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@67gqk9`} span={6} >
                                    <div>子菜单触发方式 :</div>
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7gyu63`} span={18}>
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@xqxr8a`}
                                        options={showMenuItemOptions}
                                        value={showMenuItem}
                                        onChange={(v, showname) => {
                                            setSetting({showMenuItem: v})
                                        }}
                                    />
                                </Col>
                            </Row>
                        </div>
                    ) : null
                }

                <div className="set-item" >
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@u9qngk`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@tcwthx`} span={6} >
                            <div>菜单项固定样式:</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3yjj6e`} span={18}>
                            <div>
                                <span className="first-item-spacing">{getLabel(84212, '字体大小')}</span>
                                <div   className="item-width">
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@z9kh81`}  value={fontSize} viewAttr={2} onChange={value => setSetting({fontSize: value})}/>
                                </div>
                                <span className="item-spacing">圆角</span>
                                <div   className="item-width">
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@zfsvrg`}  value={radius} viewAttr={2} onChange={value => setSetting({radius: value})}/>
                                </div>
                                <span className="item-spacing">宽度</span>
                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@69jbni`}
                                    value={menuItemAutoWidth}
                                    onChange={(v) => {setSetting({menuItemAutoWidth: v})}}
                                />
                                <span className="item-spacing"></span>
                                {
                                    menuItemAutoWidth == '1' ? (
                                        <div   className="item-width">

                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@0ymqlj`}  value={menuItemWidth} viewAttr={2} onChange={value => setSetting({menuItemWidth: value})}/>
                                        </div>
                                    ) : null
                                }
                            </div>
                            <div style={{'margin-top':'10px'}}>
                                <span className="">全局背景颜色</span>
                                <span className="item-spacing">透明</span>
                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@spykt2`}
                                    value={isBackGroundTransparent}
                                    onChange={(v) => {setSetting({isBackGroundTransparent: v})}}
                                />
                                <span className="item-spacing"></span>
                                {
                                    isBackGroundTransparent == '0' ? (
                                        <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@ucoxaj`}
                                            value={backGroundColorGlobal}
                                            onChange={(v)=> setSetting({backGroundColorGlobal: v})}
                                        />
                                    ) : null
                                }
                                <span className="item-spacing">点击父菜单自动打开子菜单</span>
                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@e1k4cw`}
                                    value={autoOpenMenuItemWhenCheckSubMenu}
                                    onChange={(v) => {setSetting({autoOpenMenuItemWhenCheckSubMenu: v})}}
                                />

                            </div>

                            <div style={{'margin-top':'10px'}}>
                                <span className="first-item-spacing">菜单项内部上下间距</span>
                                <div   className="item-width">
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@ry7nyc`}  value={menuItemTBSpacing} viewAttr={2} onChange={value => setSetting({menuItemTBSpacing: value})}/>
                                </div>
                                <span className="item-spacing">菜单项内部左右间距</span>
                                <div   className="item-width">
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@zsn7s2`}  value={menuItemLRSpacing} viewAttr={2} onChange={value => setSetting({menuItemLRSpacing: value})}/>
                                </div>
                            </div>
                            <div style={{'margin-top':'10px'}}>
                                <span className="first-item-spacing">菜单项之间上下间距</span>
                                <div   className="item-width">
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@fu5hkh`}  value={menuItemTBMargin} viewAttr={2} onChange={value => setSetting({menuItemTBMargin: value})}/>
                                </div>
                                <span className="item-spacing">菜单项之间左右间距</span>
                                <div   className="item-width">
                                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@pkgi17`}  value={menuItemLRMargin} viewAttr={2} onChange={value => setSetting({menuItemLRMargin: value})}/>
                                </div>
                            </div>

                        </Col>
                    </Row>
                </div>
                <div className="set-item" >
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@58jd7t`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@pjbuv0`} span={6} >
                            <div>未选中 :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3dkfry`} span={18}>

                            <span className="first-item-spacing">菜单项背景颜色</span>
                            <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@judhza`}
                                value={backGroundColorMenuItem}
                                onChange={(v)=> setSetting({backGroundColorMenuItem: v})}
                            />
                            <span className="item-spacing">	{getLabel(2076, '字体颜色')}</span>
                            <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@c2wgl8`}
                                value={fontColor}
                                onChange={(v)=> setSetting({fontColor: v})}
                            />
                            <span className="item-spacing">	{getLabel(16198, '加粗')}</span>
                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@dlm4ei`}
                                value={fontWeight}
                                onChange={(v) => {setSetting({fontWeight: v})}}
                            />
                        </Col>
                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@8fhgga`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5k4gk8`} span={6} >
                            <div>一级菜单选中后 :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@t71faf`} span={18}>
                            <span className="first-item-spacing">菜单项背景颜色</span>
                            <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@dfzusy`}
                                value={backGroundColorFirstMenuItemSelected}
                                onChange={(v)=> setSetting({backGroundColorFirstMenuItemSelected: v})}
                            />
                            <span className="item-spacing">	{getLabel(2076, '字体颜色')}</span>
                            <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@81w6vb`}
                                value={fontColorFirstMenuItemSelected}
                                onChange={(v)=> setSetting({fontColorFirstMenuItemSelected: v})}
                            />
                            <span className="item-spacing">	{getLabel(16198, '加粗')}</span>
                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@bw9bw4`}
                                value={fontWeightFirstMenuItemSelected}
                                onChange={(v) => {setSetting({fontWeightFirstMenuItemSelected: v})}}
                            />
                        </Col>
                    </Row>
                </div>
                <div className="set-item" >
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@vndzx3`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ha9t7g`} span={6} >
                            <div>子菜单选中后 :</div>

                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xhpp5u`} span={18}>
                            <span className="first-item-spacing">菜单项背景颜色</span>
                            <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@rgh9nf`}
                                value={backGroundColorOtherMenuItemSelected}
                                onChange={(v)=> setSetting({backGroundColorOtherMenuItemSelected: v})}
                            />
                            <span className="item-spacing">	{getLabel(2076, '字体颜色')}</span>
                            <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@9od6xh`}
                                value={fontColorOtherMenuItemSelected}
                                onChange={(v)=> setSetting({fontColorOtherMenuItemSelected: v})}
                            />
                            <span className="item-spacing">	{getLabel(16198, '加粗')}</span>
                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@epu6hv`}
                                value={fontWeightOtherMenuItemSelected}
                                onChange={(v) => {setSetting({fontWeightOtherMenuItemSelected: v})}}
                            />
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}